<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
    <img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
    <img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
    <img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
    <img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
</body>
<script>
    var lis = document.querySelectorAll('li')
    // for (var i = 0; i < lis.length; i++) {
    //     // lis[i].onclick = () => {
    //     //     console.log(i);
    //     // }

    //     lis[i].onclick = fn(i)
    //     // lis[i].onclick= function fn(i){
    //     // return function(){
    //     //     console.log(i);
    //     // lis[i].onclick=function(){

    //     // }
    // }



    // function fn(i) {
    //     console.log(i);
    // }


    //星星评分
    //闭包的特点
    var imgs = document.querySelectorAll('img')
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].onclick = () => {
            for (var j = 0; j <= i; j++) {
                if (j % 2 == 0) {
                    imgs[j].src = './images/rank_1.gif'
                }
                if (j % 2 != 0) {
                    imgs[j].src = './images/rank_2.gif'
                }
            }

            for (var j = i + 1; j <= imgs.length; j++) {
                if (j % 2 == 0) {
                    imgs[j].src = './images/rank_3.gif'
                }
                if (j % 2 != 0) {
                    imgs[j].src = './images/rank_4.gif'
                }
            }

        }

    }
    //vue路由模式及其原理

    //继承：{一个对象希望拥有另一个对象的属性和方法，这时就需要继承}
    //原型继承，
    function A() {
        this.money = "2000"
    }
    function B() {
        this.chac = "goodlooking"
    }
    var a = new A();
    // console.log(b);
    // b.__proto__=a  不推荐此种写法
    B.prototype = a  //采用此种写法
    var b = new B()

    console.log(b);

    console.log(b.money);

    //原型继承不能改变父对象的属性和方法，故采用上下文模式来解决原型继承的缺点
    //但此种方法不能继承父方法原型上面的内容

    function Parent(name, age) {
        this.name = name
        this.age = age
    }

    function Son(name, age) {

        Parent.call(this, name, age)

        this.gender = "男"
    }
    // var p = new Parent()

    var s = new Son('张三', 12)
    console.log(s);
    // console.log(p);


    //混合继承


    //浅克隆和深克隆
    var arr = [
        {
            name: 'zs',
            age: 12,
            gender: '男'
        },
        'abcd',
        125563
    ]
    // console.log(arr);
    // var brr=[...arr]

    // var brr=JSON.parse(JSON.stringify(arr))
    // // console.log(brr);
    // brr.push(2)
    // brr[0].name='ls'
    // console.log(brr);
    // console.log(arr);

    //不使用展开运算符写浅克隆,写一个循环就行
    //引用类型使用的时堆内存，但指针指向的是栈，直接赋值使用的是同一个地址，改变其中一个属性时另一个也会改变
    // var brr=arr;
    // brr.push(2)
    // console.log(brr);
    // console.log(arr);
    var brr = []
    for (var i = 0; i < arr.length; i++) {
        brr.push(arr[i])
    }
    // console.log(brr);
    brr.push(2)
    brr[0].name="ls"
    console.log(brr);

    console.log(arr);

    //arguments是一个数组
    // function fn() {
    //     console.log(arguments);
    // }
    // fn(1, 2, 3, 4)


for(var i=0;i<5;i++){
    // setTimeout(() => {
    //     console.log(i);

        
    // }, 2000);


    (function(j){
        setTimeout(() => {
            console.log(j);
        }, 1000);
    })(i)
}
//websocket nginx,浏览器的性能优化
//银行打电话


function f1(){
    var a=10;
    function f2(){
        a++;
        console.log(a);
    }
    return f2
}
var f=f1();
f()



</script>

</html>